<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-input style="width: 260px;" placeholder="输入设备/设备编码按回车" clearable class="filter-item"
        @keyup.enter.native="researchs" @clear="researchs" v-model="query.machine_code">
        <template slot="prepend">设备信息</template>
      </el-input>
      <el-input class="filter-item" style="width: 260px;" disabled v-model="name">
      </el-input>
      <el-button class="filter-item" type="success" plain @click="researchs">查询</el-button>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" :lazy="true" name="detailTab1">
        <detailTab1 :dataList="dataList" ref="detailTab1" />
      </el-tab-pane>
      <el-tab-pane label="售后履历" :lazy="true" name="serviceResume">
        <serviceResume :basicInfoShow="basicInfoShow" :deviceId="deviceId" ref="serviceResume" />
      </el-tab-pane>
      <el-tab-pane label="文件管理" :lazy="true" name="detailTab3">
        <detailTab3 :basicInfoShow="basicInfoShow" :deviceId="deviceId" ref="detailTab3" />
      </el-tab-pane>
      <el-tab-pane label="备件清单" :lazy="true" name="detailTab4">
        <detailTab4 :basicInfoShow="basicInfoShow" :deviceId="deviceId" ref="detailTab4" />
      </el-tab-pane>
      <el-tab-pane label="设备更换履历" :lazy="true" name="detailTab5">
        <detailTab5 :basicInfoShow="basicInfoShow" :deviceId="deviceId" ref="detailTab5" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import detailTab1 from '@/views/tpm/deviceAccount/components/detailTab1'
import serviceResume from '@/views/tpm/deviceAccount/serviceManage/serviceResume'
import detailTab3 from '@/views/tpm/deviceAccount/components/detailTab3'
import detailTab4 from '@/views/tpm/deviceAccount/components/detailTab4'
import detailTab5 from '@/views/tpm/deviceAccount/components/detailTab5'
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'deviceDetails',
  components: { detailTab1, serviceResume, detailTab3, detailTab4, detailTab5 },
  props: {},
  data() {
    return {
      query: {
        machine_code: '',
        page: 1,
        size: 10,
      },
      api: this.$api.tpmMachin,
      postForList: true,
      activeName: 'detailTab1',
      pageLoading: false,
      queryString: '',
      basicInfoShow: false, // 控制基本信息页面查看详情
      name: '',
      dataList: {},
      deviceId: '',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.basicInfoShow = false
    this.query.machine_code = this.$route.query.code
    this.researchs()
  },
  mounted() {},
  methods: {
    researchs() {
      let params = {
        code: this.query.machine_code,
      }
      this.$request(this.api + 'GetByCode', params).then((r) => {
        if (!r) {
          this.name = ''
          return
        }
        this.name = r.machine_name
        this.activeName = 'detailTab1'
        this.dataList = r
        this.deviceId = r.id
      })
    },
  },
}
</script>

<style lang="less" scoped></style>